<template>
  <div class="content">
    <div class="common" v-if="!isStock">
      <div class="title">
        <span>添加物流</span>
      </div>
      <div class="consigneeInfo">
        <div class="cont">
          <div>
            <p>物流类型</p>
            <div>
              <picker
                @change="bindPickerChange"
                :range="physicalSelect"
                :value="physicalvalue"
              >
                <view class="picker">{{physicalName ? physicalName : '请选择物流类型'}}</view>
              </picker>
            </div>
          </div>
          <div>
            <p>物流单号</p>
            <div>
              <input
                class="inputCalss2"
                v-model="physicalRefundValue"
                type="text"
                placeholder="请输入物流单号"
                @change="physicalRefundChange"
                maxlength="888"
                placeholder-style="color: #6d6161;"
              />
            </div>
          </div>
        </div>
      </div>
      <button class="btn" @click="handleClose2">确认发货</button>
    </div>
    <div class="stock" v-else>
      <div v-for="(item,index) in stockList" :key="index">
        <span>{{item.label}}</span>
        <input
          v-if="item.key === 'physicalRefundValue'"
          v-model="physicalRefundValue"
          type="number"
          :placeholder="item.placeholder"
          :disabled="item.disabled"
          placeholder-style="color: #6d6161;"
        />
        <picker
          v-else
          class="proportionClass"
          @change="bindPickerChange"
          :range="physicalSelect"
          :value="item.key"
        >
          <span class="picker">{{physicalName ? physicalName : item.placeholder}}</span>
          <i-icon
            v-if="item.key !== 'physicalRefundValue'"
            type="enter"
            size="16"
            color="#696969"
          />
        </picker>
      </div>
      <button class="btn" @click="handleClose2">确认发货</button>
    </div>
  </div>
</template>

<script>
import { UPDATE_ORDER_API } from '@/api'
import { getCurrentPageParams } from '@/utils'

export default {
  components: {},
  data () {
    return {
      visible2: false,
      physicalRefundValue: '', // 物流
      physicalName: '', // 物流类型渲染名称
      setphysical: '', // 传给后台物流类型
      physicalTypeArr: [
        { name: 'EMS', code: 'EMS' },
        { name: '顺丰', code: 'SF' },
        { name: '圆通', code: 'YTO' },
        { name: '百世快递', code: 'HTKY' },
        { name: '中通', code: 'ZTO' },
        { name: '韵达', code: 'YD' },
        { name: '申通', code: 'STO' },
        { name: '德邦', code: 'DBL' },
        { name: '优速', code: 'UC' },
        { name: '宅急送', code: 'ZJS' },
        { name: '京东', code: 'JD' },
        { name: '信丰', code: 'XFEX' },
        { name: '全峰', code: 'QFKD' },
        { name: '跨越', code: 'KYSY' },
        { name: '安能', code: 'ANE' },
        { name: '快捷', code: 'FAST' },
        { name: '国通', code: 'GTO' },
        { name: '天天', code: 'HHTT' },
        { name: '邮政', code: 'YZPY' },
        { name: '中铁快运', code: 'ZTKY' }
      ],
      physicalSelect: [
        'EMS',
        '顺丰',
        '圆通',
        '百世快递',
        '中通',
        '韵达',
        '申通',
        '德邦',
        '优速',
        '宅急送',
        '京东',
        '信丰',
        '全峰',
        '跨越',
        '安能',
        '快捷',
        '国通',
        '天天',
        '邮政',
        '中铁快运'
      ],
      physicalvalue: 0,
      isStock: false
    }
  },
  onShow () {
    if (getCurrentPageParams('type') === 'isStock') {
      this.isStock = true
    } else {
      // this.isStock = false
      this.isStock = true
    }
  },
  computed: {
    account () {
      return this.$cookie.get('account')
    },
    orderNo () {
      return getCurrentPageParams('orderNo')
    },
    stockList () {
      return [
        {
          label: '物流类型',
          disabled: true,
          placeholder: '请选择',
          type: 'text',
          key: 'physicalvalue'
        },
        {
          label: '物流单号',
          disabled: false,
          placeholder: '请输入',
          type: 'digit',
          key: 'physicalRefundValue'
        }
      ]
    }
  },
  created () {},
  methods: {
    bindPickerChange (e) {
      const vm = this
      let index = Number(e.mp.detail.value)
      for (let i = 0; i < vm.physicalSelect.length; i++) {
        if (index === Number(i)) {
          vm.physicalName = vm.physicalSelect[i] // 渲染在页面上的物流名称
          for (let j = 0; j < vm.physicalTypeArr.length; j++) {
            if (vm.physicalName === vm.physicalTypeArr[j].name) {
              vm.setphysical = vm.physicalTypeArr[j].code // 像后台传的快递编号
            }
          }
        }
      }
    }, // 选择物流类型
    physicalRefundChange (e) {
      let value = e.mp.detail.value
      this.physicalRefundValue = value
    }, // 物流号change事件
    handleClose2 () {
      const vm = this
      let params = {
        orderNo: vm.orderNo,
        shippingCode: vm.setphysical,
        logisticCode: vm.physicalRefundValue
      }
      if (vm.physicalName !== '') {
        if (vm.physicalRefundValue !== '') {
          UPDATE_ORDER_API(params)
            .then(r => {
              if (r.data.code === '0' || r.data.data) {
                vm.$alert('物流单号提交成功', '').then(() => {
                  vm.$router.go(-2)
                })
              } else {
                vm.$toast(r.data.message)
              }
            })
            .catch(e => {
              console.info(e)
            })
        } else {
          vm.$toast('物流单号不能为空~~~')
        }
      } else {
        vm.$toast('物流类型还没有选择~~~')
      }
    } // 输入物流确定按钮
  }
}
</script>

<style lang="scss">
@import 'static/styles/color.scss';

.content {
  > .common {
    width: 360px;
    margin: auto;
    .title {
      font-size: 16px;
      line-height: 16px;
      padding-top: 30px;
      span {
        padding-left: 5px;
        color: #5996f8;
        border-left: 5px solid #5996f8;
      }
    }
    .consigneeInfo {
      height: auto;
      margin: 0 auto 15px;
      box-shadow: 0 0 8px lighten($blue, 20%);
      transform: translateY(10px);
      .cont {
        padding: 20px;
        font-size: 14px;
        > div {
          display: flex;
          align-items: center;
          justify-content: space-between;
          line-height: 40px;
          > p {
            width: 30%;
          }
          > div {
            width: 60%;
            .picker {
              color: #6d6161;
            }
            .inputCalss2 {
              border-radius: 4px;
              color: #6d6161;
            }
          }
        }
      }
    }
    .btn {
      background: $new-dark-blue;
      border-radius: 25px;
      font-size: 14px;
      color: #fff;
      line-height: 30px;
      margin-top: 70px;
    }
  }
  > .stock {
    width: 100%;
    height: auto;
    background: #f6f8f9;
    div {
      width: 100%;
      padding: 0 10px;
      height: 50px;
      font-size: 14px;
      border-bottom: 1px solid #fafbfc;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #fff;
      input {
        color: #686868;
        text-align: right;
      }
      .proportionClass {
        display: flex;
        align-items: center;
        span {
          color: #696969;
        }
      }
    }
    > .btn {
      width: 95%;
      margin: 50px auto;
      height: 45px;
      font-size: 14px;
      color: #fff;
      line-height: 45px;
      border-radius: 25px;
      background: linear-gradient(to right, $new-red-tint, $new-red-dark);
    }
  }
}
</style>
